<!-- 初始号  游戏列表 -->

<template>
    <el-container class="container">
        <!-- header -->
        <el-header class="header">
            <div class="header_left">
                <div class="list">
                    <span>初始号 &nbsp;游戏列表</span>
                </div>
                <div class="all">
                    <span>全部</span>
                    <span>寄售</span>
                    <span>担保</span>
                </div>
            </div>
        </el-header>
        <div class="change">
            <!-- 表单 -->
            <div class="c_id">
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="库存ID">
                        <el-input placeholder="请输入" clearable />
                    </el-form-item>
                    <el-form-item label="游戏名称">
                        <el-select placeholder="请选择" clearable style="width: 200px;">
                            <el-option label="Zone one" value="shanghai" />
                            <el-option label="Zone two" value="beijing" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="发货方式">
                        <el-select placeholder="请选择" clearable style="width: 200px;">
                            <el-option label="Zone one" value="shanghai" />
                            <el-option label="Zone two" value="beijing" />
                        </el-select>
                    </el-form-item>
                    <!-- 日期选择器 -->
                    <el-form-item label="交易时间">
                        <el-date-picker style="width: 200px;" type="daterange" start-placeholder="开始"
                            end-placeholder="结束" :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]" />
                    </el-form-item>
                    <el-form-item style="width: 200px;" label="公开">
                        <el-select placeholder="请选择" clearable style="width: 200px;">
                            <el-option label="Zone one" value="shanghai" />
                            <el-option label="Zone two" value="beijing" />
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div class="c_pirce">
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item style="width: 200px;" label="降价">
                        <el-select placeholder="全部" clearable style="width: 200px;">
                            <el-option label="Zone one" value="shanghai" />
                            <el-option label="Zone two" value="beijing" />
                        </el-select>
                    </el-form-item>
                    <el-form-item style="width: 200px;" label="状态">
                        <el-select placeholder="全部" clearable style="width: 200px;">
                            <el-option label="Zone one" value="shanghai" />
                            <el-option label="Zone two" value="beijing" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="交易时间">
                        <el-date-picker style="width: 519px;" type="daterange" start-placeholder="开始日期"
                            end-placeholder="结束日期" :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]" />
                    </el-form-item>
                    <!-- 搜索/重置 -->
                    <el-button type="primary">
                        <el-icon>
                            <Search />
                        </el-icon>
                        搜索
                    </el-button>
                    <el-button>重置</el-button>
                </el-form>
            </div>



        </div>
        <!-- main -->
        <el-main class="main">
            <!-- 刷新/新增按钮 -->
            <el-button>
                刷新
            </el-button>
            <el-button type="primary">+ 新增</el-button>
            <!-- 游戏列表  table -->
            啊啊啊啊啊啊啊啊啊啊啊没写
        </el-main>
    </el-container>
</template>

<style lang="scss" scoped>
// @mixin FontStyle

.container {
    width: 100%;
    height: 1044px;
    // background-color: #d7e4f1;
    float: left;
    margin-top: 10px;
    margin-left: 10px;

    .header {
        height: 110px;
        background-color: #FFFFFF;
        float: left;
        border-radius: 10px;

        .header_left {
            width: 231px;
            height: 100px;
            margin-top: 10px;
            margin-left: 20px;

            .list {
                width: 170px;
                height: 44px;

                span {
                    font-size: 20px;
                    color: #333333;
                }
            }

            .all {
                width: 226px;
                height: 46px;
                margin-top: 10px;
                line-height: 46px;
                display: flex;
                flex-wrap: wrap;
                display: -webkit-flex;

                span {
                    flex: 1;
                }
            }
        }
    }

    .change {
        width: 1608px;
        height: 136px;
        background-color: #FFFFFF;
        float: left;
        margin-top: 29px;
        border-radius: 10px;

        .c_id,
        .c_pirce {
            width: 1582px;
            height: 32px;
            // background-color: #dea5a5;
            /* margin-top: 24px;
                margin-left: 24px; */
            margin: 24px 0 0 24px;
        }
    }

    .main {
        width: 1608px;
        height: 759px;
        background-color: #FFFFFF;
        float: left;
        margin-top: 10px;
        border-radius: 10px;
    }
}
</style>